<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #cav {
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <canvas id="cav" width="794" height="1116" style="background-color: #fff;"></canvas>

        <script>
            /** @type {HTMLCanvasElement} */

            const canvas = document.querySelector("#cav");
            const ctx = canvas.getContext("2d");
            const w = canvas.width;
            const h = canvas.height;

            const pw = 25;  //图宽
            const space = pw+5; //间距
            const range=[80,100]    //每格的数量范围
            function rand(n, m) {
                return parseInt(n + Math.random() * (m - n + 1));
            }

            let IPLUP = [];
            let IPLDOWN = [];
            let IPLALL=[]

            function checkDis(a,b){
                return Math.abs(Math.sqrt(Math.pow(a.x-b.x,2)+Math.pow(a.y-b.y,2)))
            }


            let cont=1;
            function createPosition(dir) {
                let xRange=[];
                let yRange=[];
                let IPL;
                if(dir==='up'){
                    xRange=[pw, w - pw];
                    yRange=[pw, h/2 - pw];
                    IPL=IPLUP
                }else if(dir==='down'){
                    xRange=[pw, w - pw];
                    yRange=[h/2 + pw, h - pw];
                    IPL=IPLDOWN
                }

                let point={
                    x : rand(xRange[0], xRange[1]),
                    y : rand(yRange[0], yRange[1]),
                    deg : (rand(0, 360) * Math.PI) / 180
                }

                if(IPL.length){
                    let index=0;
                    while (true){
                        cont++
                        if(checkDis(IPL[index],point) < space){
                            point={
                                x : rand(xRange[0], xRange[1]),
                                y : rand(yRange[0], yRange[1]),
                                deg : (rand(0, 360) * Math.PI) / 180
                            }
                            index=0
                            continue;
                        }
                        if(index>=IPL.length-1){
                            break;
                        }
                        index++
                    }
                }
                IPL.push(point);
            }


            const totalUp=rand(range[0],range[1]);
            for (let i = 0; i < totalUp; i++) {
                createPosition('up');
            }
            const totalDown=rand(range[0],range[1]);
            for (let i = 0; i < totalDown; i++) {
                createPosition('down');
            }

            console.log(cont)
            IPLALL=[].concat(IPLUP).concat(IPLDOWN)

            const iconNo = rand(1, 21);

            function drawImage(dir){
                ctx.clearRect(0,0,w,h,);
                ctx.fillStyle="#fff";
                ctx.fillRect(0,0,w,h);
                ctx.fillStyle="#000";
                ctx.font="10px simhei";
                ctx.fillText(`total:${totalUp}`,10,10);
                IPLALL.forEach((p) => {
                    ctx.save();

                    ctx.translate(p.x, p.y);
                    ctx.rotate(p.deg);
                    ctx.drawImage(img, -pw/2, -pw/2, pw, pw);

                    ctx.restore();
                });
                ctx.beginPath();
                ctx.moveTo(0,h/2)
                ctx.lineTo(w,h/2)
                ctx.stroke()
                ctx.font="10px simhei";
                ctx.fillText(`total:${totalDown}`,10,h/2 + 10);
            }

            const img = new Image();
            img.onload = function () {
                drawImage()
            };
            img.src = `./icon/icon_${iconNo}.png`;

            canvas.addEventListener("mousedown", function (ev) {
                let mx = ev.offsetX;
                let my = ev.offsetY;
                // let disX = 0;
                // let disY = 0;
                let index;
                for (let i = 0; i < IPLALL.length; i++) {
                    const p = IPLALL[i];
                    ctx.save();
                    ctx.beginPath();
                    ctx.translate(p.x, p.y);
                    ctx.rotate(p.deg);
                    ctx.rect(-pw/2, -pw/2, pw, pw);
                    if (ctx.isPointInPath(mx, my)) {
                        index = i;
                        ctx.restore();
                        let x=IPLALL[i].x
                        let y=IPLALL[i].y
                        function move(ev) {
                            let disX = ev.offsetX - mx;
                            let disY = ev.offsetY - my;
                            IPLALL[i].x = x+disX;
                            IPLALL[i].y = y+disY;

                            drawImage()
                        }
                        function up() {
                            canvas.removeEventListener("mousemove", move);
                            canvas.removeEventListener("mouseup", up);
                        }
                        canvas.addEventListener("mousemove", move);
                        canvas.addEventListener("mouseup", up);

                        break;
                    }
                    ctx.restore();
                }
            });
        </script>
    </body>
</html>
